<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3352517_134xz354g69.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/cookie.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/home-bar.js"></script>
    <script src="./js/detail.js"></script>
    <title>详情页</title>
</head>

<body>
    <!-- 页头 -->
    <header></header>
    <script>
        $('header').load('./header.html');
    </script>

    <!-- 导航栏 -->
    <nav>
        <div class="wrap">
            <div class="logo">
                <img src="./img/logo.png">
            </div>
            <ul class="ul_one" id="nav_ul">
                <li>
                    <a href="#">全部商品分类</a>
                    <div class="left">
                        <ul class="left_one">
                            <li>
                                <a href="#" class="one_a">手机</a>
                                <div class="show_hide">
                                    <ul class="left_two">
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="#" class="one_a">电视</a>
                                <div class="show_hide">
                                    <ul class="left_two">
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                        <li>
                                            <img src="./img/2.webp"><a href="#">Xiaomi 12 Pro</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#" class="one_a">笔记本 平板</a></li>
                            <li><a href="#" class="one_a">家电</a></li>
                            <li><a href="#" class="one_a">出行 穿戴</a></li>
                            <li><a href="#" class="one_a">智能 路由器</a></li>
                            <li><a href="#" class="one_a">电源配件</a></li>
                            <li><a href="#" class="one_a">健康 儿童</a></li>
                            <li><a href="#" class="one_a">耳机 音箱</a></li>
                            <li><a href="#" class="one_a">生活 箱包</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Xiaomi手机</a>
                    <div class="div_one">
                        <ul class="ul_two">
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/2.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Redmi 红米</a>
                    <div class="div_one">
                        <ul class="ul_two">
                            <li>
                                <div class="list-img">
                                    <img src="./img/jdxlk1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/jdxlk1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/jdxlk1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                            <li>
                                <div class="list-img">
                                    <img src="./img/1.webp">
                                </div>
                                <h1>Xiaomi 12 Pro</h1>
                                <span>4699元起</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">电视</a>
                    <div class="div_one"></div>
                </li>
                <li>
                    <a href="#">笔记本</a>
                    <div class="div_one"></div>
                </li>
                <li>
                    <a href="#">平板</a>
                    <div class="div_one"></div>
                </li>
                <li>
                    <a href="#">家电</a>
                    <div class="div_one"></div>
                </li>
                <li>
                    <a href="#">路由器</a>
                    <div class="div_one"></div>
                </li>
                <li>
                    <a href="#">服务</a>
                </li>
                <li>
                    <a href="#">社区</a>
                </li>
            </ul>
            <div class="inp">
                <input type="text" class="inp-text"><button class="inp-sub iconfont icon-sousuo">
            </div>
        </div>
    </nav>

    <!-- 滚动导航 -->
    <div class="swiper-nav">
        <div class="wrap">
            <h2>Xiaomi 12 Pro</h2>
            <div class="left">
                <span>|</span><a>Xiaomi 12</a><span>|</span><a>Xiaomi 12X</a>
            </div>
            <div class="right">
                <a>概述页</a>
                <span>|</span><a>参数页</a><span>|</span><a>F码通道</a><span>|</span><a>咨询客服</a><span>|</span><a>用户评价</a>
            </div>

        </div>
    </div>

    <!-- 立即登录 -->
    <div class="login">
        <div class="wrap">
            <div class="text">为方便您购买，请提前登录<a href="./login.html">立即登录</a><span>X</span></div>
        </div>
    </div>

    <!-- 商品详情 -->
    <div class="mi-product">
        <div class="wrap">
            <div class="mi-product-detail">
                <div class="detail-img">
                    <!-- Swiper -->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <!-- <div class="swiper-slide"><img src="./img/detail1.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/detail2.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/detail3.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/detail4.png" alt=""></div>
                            <div class="swiper-slide"><img src="./img/detail5.png" alt=""></div> -->
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>

                    <!-- Swiper JS -->
                    <script src="./swiper/swiper-bundle.min.js"></script>

                    <!-- Initialize Swiper -->
                    <script>
                        var swiper = new Swiper(".mySwiper", {
                            spaceBetween: 30,
                            centeredSlides: true,
                            loop: true,
                            effect: 'fade',
                            autoplay: {
                                delay: 5000,
                                disableOnInteraction: false,
                            },
                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                            },
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    </script>
                </div>
                <div class="detail-con">
                    <h2>Xiaomi 12 Pro</h2>
                    <p class="desc"><span>「24期免息，信用卡分期至高立减500元;+99元得50W立式无线充」</span>全新一代 骁龙8 移动平台｜2K AMOLED
                        屏幕｜5000万超清三主摄 | CyberFocus 万物追焦｜全焦段夜景｜120W 澎湃秒充</p>
                    <p class="myself"
                        title="企业名称：小米通讯技术有限公司
                    企业执照注册号：91110108558521630L
                    企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
                    企业电话：400-100-5678
                    营业期限：2010年08月25日 至 2040年08月24日
                    经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">
                        小米自营</p>
                    <!-- <p class="price">5399 元</p> -->
                    <hr>
                    <div class="gifts">
                        <!-- <div class="gift">
                            <span>赠品一</span>
                            <p>满1件赠价值299元小米尊享礼盒（保温杯+蓝牙音箱+台灯） 单品（黑色） 赠完即止</p>
                        </div>
                        <div class="gift">
                            <span>赠品二</span>
                            <p>本组赠品可任选1种</p>
                            <div>满1件赠价值99元Xiaomi 12 Pro 素皮保护壳 for 素皮版（灰绿） 赠完即止</div>
                            <div>满1件赠价值69元Xiaomi 12 Pro 亲肤软胶保护壳 for 玻璃版（绿色） 赠完即止</div>
                            <div>满1件赠价值69元Xiaomi 12 Pro 亲肤软胶保护壳 for 玻璃版（蓝色） 赠完即止</div>
                            <div>满1件赠价值69元Xiaomi 12 Pro 亲肤软胶保护壳 for 玻璃版（紫色） 赠完即止</div>
                        </div> -->
                    </div>
                    <div class="address">
                        <i class="iconfont icon-dizhi"></i>
                        <div>
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海淀区</span>
                            <span>清河街道</span>
                            <a>修改</a>
                        </div>
                        <a>有现货</a>
                    </div>
                    <div class="check-box">
                        <div class="versions check">
                            <div class="ver-title">选择版本</div>
                            <ul>
                                <li>12GB+256GB</li>
                                <li>8GB+128GB</li>
                                <li>8GB+256GB</li>
                            </ul>
                        </div>
                        <div class="color check">
                            <div class="ver-title">选择颜色</div>
                            <ul>
                                <li>黑色</li>
                                <li>蓝色</li>
                                <li>紫色</li>
                                <li>原野绿(素皮)</li>
                            </ul>
                        </div>
                        <div class="suit check">
                            <div class="ver-title">选择套装</div>
                            <ul>
                                <li>标准版</li>
                                <li>赠蓝牙耳机Air2 SE (全款支付专享)</li>
                            </ul>
                        </div>
                    </div>
                    <div class="service-box">
                        <div class="vip service">
                            <div class="service-title">
                                <span>选择小米提供的尊享服务</span>
                                <a>了解尊享服务&gt;</a>
                            </div>
                            <div class="service-con" title="MiCare保障服务" data-price="749元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>MiCare保障服务<em>已省150元</em></h3>
                                    <p>享碎屏、延保、换电池、保值换新4大权益</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">749元</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accident service">
                            <div class="service-title">
                                <span>选择小米提供的意外保护</span>
                                <a>了解意外保护&gt;</a>
                            </div>
                            <div class="service-con" title="意外保障服务" data-price="599元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>意外保障服务<em>意外损免费修</em></h3>
                                    <p>1年1次意外损坏 官方原厂 免费维修</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">599元</div>
                                    </div>
                                </div>
                            </div>
                            <div class="service-con" title="碎屏保障服务" data-price="349元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>碎屏保障服务<em>碎屏免费修</em></h3>
                                    <p>1年1次意外损坏 官方原厂 免费维修</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">349元</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lengthen service">
                            <div class="service-title">
                                <span>选择小米提供的延长保修</span>
                                <a>了解延长保修&gt;</a>
                            </div>
                            <div class="service-con" title="延长保修服务" data-price="749元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>延长保修服务<em>质保延长1年</em></h3>
                                    <p>性能故障 官方原厂 多次免费维修</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">749元</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cloud service">
                            <div class="service-title">
                                <span>选择小米提供的云空间服务</span>
                                <a>了解云空间服务&gt;</a>
                            </div>
                            <div class="service-con" title="云空间年卡200G" data-price="208元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>云空间年卡200G<em>208元</em></h3>
                                    <p>主商品签收后，自动激活至下单帐号</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">208元</div>
                                    </div>
                                </div>
                            </div>
                            <div class="service-con" title="云空间年卡50G" data-price="58元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>云空间年卡50G<em>58元</em></h3>
                                    <p>主商品签收后，自动激活至下单帐号</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">58元</div>
                                    </div>
                                </div>
                            </div>
                            <div class="service-con" title="云空间月卡200G" data-price="21元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>云空间月卡200G<em>221元</em></h3>
                                    <p>主商品签收后，自动激活至下单帐号</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">21元</div>
                                    </div>
                                </div>
                            </div>
                            <div class="service-con" title="云空间月卡50G" data-price="26元">
                                <div class="radio"><i class="iconfont icon-duigou"></i></div>
                                <img src="./img/protect.png">
                                <div class="box">
                                    <h3>云空间月卡50G<em>6元</em></h3>
                                    <p>主商品签收后，自动激活至下单帐号</p>
                                    <div class="reader">
                                        <div class="reader-check"><i class="iconfont icon-duigou"></i></div>
                                        我已阅读<span><a>服务条款</a>｜<a>常见问题</a></span>
                                        <div class="pric">26元</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="service-sum">
                        <div class="selected">
                            <span>Xiaomi 12 Pro 12GB+256GB 黑色</span>
                            <p>5399元</p>
                        </div>
                        <div class="selected">
                            <span>碎屏保障服务</span>
                            <p>元</p>
                        </div>
                        <div class="selected">
                            <span>延长保险服务</span>
                            <p>元</p>
                        </div>
                        <div class="total">
                            总计：5399元
                        </div>
                    </div>
                    <div class="service-btn">
                        <a class="add" href="./cart.html">加入购物车</a>
                        <a class="love"><i class="iconfont icon-aixin"></i>喜欢</a>
                    </div>
                    <div class="service-info">
                        <span><i class="iconfont icon-yuanquangou"></i><em>小米自营</em></span>
                        <span><i class="iconfont icon-yuanquangou"></i><em>小米发货</em></span>
                        <span><i class="iconfont icon-yuanquangou"></i><em>15天无理由退货</em></span>
                        <span><i class="iconfont icon-yuanquangou"></i><em>运费说明</em></span>
                        <span><i class="iconfont icon-yuanquangou"></i><em>企业信息</em></span>
                        <span><i class="iconfont icon-yuanquangou"></i><em>7天价格保护</em></span>
                    </div>
                </div>

            </div>
        </div>
        <div class="explain">
            <div class="wrap">
                <h3>价格说明</h3>
                <img src="./img/explain.png" alt="">
            </div>
        </div>
    </div>
    </div>

    <!-- 尾部 -->
    <footer></footer>
    <script>
        $('footer').load('./footer.html');
    </script>

    <!-- 移动 -->
    <div class="bar"></div>
    <script>
        $('.bar').load('./home-bar.html');
    </script>

</body>

</html>